{% extends 'layout/indexframe.html' %}

{% block title %}reptiles{% endblock %}

{% block css %}
    <style>
        .img-circle {
            width: 80px;
            height: 80px;
            object-fit: cover;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="wrapper wrapper-content animated fadeInRight" style="height: 3000px;">
        <div class="row">
            <div class="col-lg-8">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <h1 style="text-align: center;color: #0f0f0f;">
                            <strong>物联网热点</strong>
                        </h1>
                        <div class="hr-line-dashed"></div>

                        {% for new in news %}

                            <div class="" style="height:170px;float: left;"><a
                                    href={{ new.link }} title={{ new.title }}><img
                                    style="height: 170px;width: 270px;" src={{ new.img }}></a></div>
                            <div style="height:170px;　margin-left:20px;">
                                <h3 style="text-align: center;"><a href={{ new.link }}
                                                                           title={{ new.title }}
                                                                   style="color: #0f0f0f;font-size: 25px">{{ new.title }}</a>
                                </h3>
                                <div class="hr-line-dashed"></div>
                                <p><a style="color: #0f0f0f;;font-size: 20px" href={{ new.link }}
                                        title={{ new.detail }}>{{ new.detail }}</a>
                                </p>
                            </div>


                            <hr/>
                            <div style="height: 10px;">　</div>
                        {% endfor %}

                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                           aria-haspopup="true" aria-expanded="false"><h3 style="text-align: center;">
                            <strong>物联网项目</strong><span class="caret"></span>
                        </h3></a>
                        <ul class="dropdown-menu" aria-labelledby="drop1">
                            <div class="hr-line-dashed"></div>
                            {% for prog in progs %}
                                <li>
                                    <div class="" style="height:170px;float: left;"><a
                                            href={{ prog.link }} title={{ prog.title }}><img
                                            style="height: 150px;width: 250px;" src={{ prog.img }}></a>
                                    </div>
                                    <div style="height:170px;　margin-left:20px;">
                                        <h3 style="text-align: center;"><a href={{ prog.link }}
                                                                                   title={{ prog.title }}
                                                                           style="color: #0f0f0f;font-size: 15px">{{ prog.title }}</a>
                                        </h3>
                                        <div class="hr-line-dashed"></div>
                                        <p><a style="color: #0f0f0f;font-size: 15px;" href={{ prog.link }}
                                                title={{ prog.title }}>{{ prog.detail }}</a>
                                        </p>
                                    </div>

                                    <hr/>
                                    <div style="height: 10px;">　</div>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                    <div class="ibox-content">

                        <a id="drop2" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                           aria-haspopup="true" aria-expanded="false"><h3 style="text-align: center;">
                            <strong>物联网案例</strong><span class="caret"></span>
                        </h3></a>
                        <ul class="dropdown-menu" aria-labelledby="drop2">
                            <div class="hr-line-dashed"></div>
                            {% for exam in exams %}
                                <li>
                                    <div class="" style="height:170px;float: left;"><a
                                            href={{ exam.link }} title={{ exam.title }}><img
                                            style="height: 150px;width: 250px;" src={{ exam.img }}></a></div>
                                    <div style="height:170px;　margin-left:20px;">
                                        <h3 style="text-align: center;"><a href={{ exam.link }}
                                                                                   title={{ exam.title }}
                                                                           style="color: #0f0f0f;font-size: 15px">{{ exam.title }}</a>
                                        </h3>
                                        <div class="hr-line-dashed"></div>
                                        <p><a style="color: #0f0f0f;font-size: 15px;" href={{ exam.link }}
                                                title={{ exam.title }}>{{ exam.detail }}</a>
                                        </p>
                                    </div>


                                    <hr/>
                                    <div style="height: 10px;">　</div>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>

                    <div class="ibox-content">

                        <a id="drop2" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                           aria-haspopup="true" aria-expanded="false"><h3 style="text-align: center;">
                            <strong>物联网产品</strong><span class="caret"></span>
                        </h3></a>
                        <ul class="dropdown-menu" aria-labelledby="drop2">
                            <div class="hr-line-dashed"></div>
                            {% for prod in prods %}
                                <li>
                                    <div class="" style="height:170px;float: left;"><a
                                            href={{ prod.link }} title={{ prod.title }}><img
                                            style="height: 150px;width: 250px;" src={{ prod.img }}></a></div>
                                    <div style="height:170px;　margin-left:20px;">
                                        <h3 style="text-align: center;"><a href={{ prod.link }}
                                                                                   title={{ prod.title }}
                                                                           style="color: #0f0f0f;font-size: 15px">{{ prod.title }}</a>
                                        </h3>
                                        <div><span style="color: #0f0f0f;font-size: 15px;">应用场景：</span>
                                            <b style="color: #aa1111;border: 2px solid #dddddd;border-radius: 30px; padding: 5px 5px;">{{ prod.field1 }}</b>　　
                                            <b style="color: #aa1111;border: 2px solid #dddddd;border-radius: 30px; padding: 5px 5px;">{{ prod.field2 }}</b>
                                        </div>
                                        <div>
                                            　　

                                        </div>
                                        <p><a style="color: #0f0f0f;font-size: 15px;" href={{ prod.link }}
                                                title={{ prod.title }}>{{ prod.detail }}</a>
                                        </p>
                                    </div>


                                    <hr/>
                                    <div style="height: 10px;">　</div>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>




{% endblock %}

{% block js %}
    <script>
        $(document).ready(function () {
            $('#iot_inf').addClass('active')


        });
    </script>>

{% endblock %}